<?php $result_barra = $sf_data->getRaw('result_barra');  
$result_area = $sf_data->getRaw('result_area'); ?>
<div class="sf_admin_chart" style="width: 73%;float:right;">
  <script src="/js/highcharts/js/highcharts.js" type="text/javascript"></script>
  <script type="text/javascript">
    var chart1,chart2; // globally available
    function getFromFilter(){

      var text = '';
      $('#sf_admin_filter_hideable tr').each(function(index, value){
        var inst = $(this);
        if ($(inst.find('input, select')[0]).val()){
          text = text + '<b>' + $(inst.find('label')[0]).html()+': ';
          if ($(inst.find('select').length)){
            text = text+$(inst.find('select option:selected')[0]).text()+'</b><br>';
          }else{
            text = text+$(inst.find('input')[0]).val()+'</b><br>';
          }
        }
      });
            
      return text;
    }
  function changeGroupBy(str){
    $('#bb_prestamo_filters_group_by').val(str);
  }
  
  function startDropdown(){
    $('#bb_prestamo_filters_group_by').val('<?php echo $result_area['group_by']; unset($result_area['group_by']); ?>');
    
    var groupby_text = 'Fecha Entrega';
      
      switch($('#bb_prestamo_filters_group_by').val()){
      case "FECHAREALDEVOLUCION":
        groupby_text = "Fecha de Devolucion";
        break;
      case "FECHAVENCIMIENTOPRESTAMO":
        groupby_text = "Fecha de Vencimiento";
        break;
      default:
        break;
      }
      $('#dropdown-groupby li.divider').after('<li><a href="#" groupby="'+$('#bb_prestamo_filters_group_by').val()+'">'+groupby_text+'</a></li>');
      $('#dropdown-title').text('Agrupado por '+groupby_text);
  }
  
    $(document).ready(function() {
      startDropdown();
      $('#dropdown-groupby li a').click(function(e){
        e.preventDefault();
        changeGroupBy($(this).attr('groupby'));
        $('.sf_admin_filter form').submit();
      });
  
      chart1 = new Highcharts.Chart({
        chart: {
          renderTo: 'chart1',
          type: 'column'
        },
        title: {
          text: 'Reporte en barra - Prestamos por biblioteca'
        },
        subtitle: {
          text: 'Reporte de prestamos ordenados por biblioteca y su tipo de prestamo'
        },
        xAxis: {
          categories: [
            'En sala','Domiciliario'
          ]
        },
        yAxis: {
          min: 0,
          title: {
            text: 'Cantidad de prestamos'
          }
        },
        legend: {
          layout: 'vertical',
          backgroundColor: '#FFFFFF',
          align: 'left',
          verticalAlign: 'top',
          x: 100,
          y: 70,
          floating: true,
          shadow: true
        },
        tooltip: {
          formatter: function() {
            return ''+
              this.x +': '+ this.y +' prestamos';
          }
        },
        plotOptions: {
          column: {
            pointPadding: 0.2,
            borderWidth: 0
          }
        },
        series: [
<?php
$i=1;
foreach ($result_barra as $point)
{
  echo "{name:'" . $point['biblioteca'] . "',data: [" . $point['en_sala'] . ',' . $point['domiciliario'] . ']}';
  if ($i < count($result_barra))
  {
    echo ',';
  }
  $i++;
}

?>
      ]
    });
          
    chart2 = new Highcharts.Chart({
      chart: {
        renderTo: 'chart2',
        type: 'line',
        marginRight: 130,
        marginBottom: 25
      },
      title: {
        text: 'Reporte de area - Prestamos por biblioteca'
      },
      subtitle: {
        text: 'Reporte de prestamos ordenados por biblioteca y su tipo de prestamo'
      },
      xAxis: {
        categories: [
          <?php
$categories = $result_area['categories'];
unset($result_area['categories']);
$str = '';
foreach ($categories as $year => $months)
{
  foreach ($months as $month)
  {
    $str .= "'".$year.'-'.$month."',";
  }
}
echo trim($str, ',');

?>
        ]
      },
      yAxis: {
        title: {
          text: 'Cantidad de prestamos'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
          }]
      },
      tooltip: {
        formatter: function() {
          return '<b>'+ this.series.name +'</b><br/>'+
            this.x +': '+ this.y +' prestamos';
        }
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -10,
        y: 100,
        borderWidth: 0
      },
      series: [
<?php

$i = 1;
foreach ($result_area as $biblioteca => $prestamos)
{
  echo "{name:'" . $biblioteca . " En Sala',data: [";
  $ii = 1;
  foreach ($prestamos['en_sala'] as $valor)
  {
    echo $valor;
    if ($ii < count($prestamos['en_sala']))
    {
      echo ',';
    }
    $ii++;
  }
  echo ']},';

  echo "{name:'" . $biblioteca . " Domiciliario',data: [";
  $ii = 1;
  foreach ($prestamos['domiciliario'] as $valor)
  {
    echo $valor;
    if ($ii < count($prestamos['domiciliario']))
    {
      echo ',';
    }
    $ii++;
  }
  echo ']}';

  if ($i < count($result_area))
  {
    echo ',';
  }
  $i++;
}

?>
                              ]
            
                            });
                          });
                        
                          
  </script>
  <div id="chart1" style="width: 100%; height: 400px;"></div>
  <div class="btn-toolbar" style="float:right;">
    <div class="btn-group">
      <button id="dropdown-title" class="btn btn-small" data-toggle="dropdown"></button>
      <button class="btn btn-small dropdown-toggle" style="height: 28px;" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <ul id="dropdown-groupby" class="dropdown-menu">
        <li>
          <a href="#" groupby="FECHAENTREGA">Fecha Entrega</a>
        </li>
        <li>
          <a href="#" groupby="FECHAREALDEVOLUCION">Fecha de Devolucion</a>
        </li>
        <li>
          <a href="#" groupby="FECHAVENCIMIENTOPRESTAMO">Fecha de Vencimiento</a>
        </li>
        <li class="divider"></li>
      </ul>
    </div>
  </div>
  <div style="clear:both"></div> 
  <div id="chart2" style="width: 100%; height: 400px;"></div>
</div>
